<template>
  <f7-page class="step-body7">
    <!-- 表头 -->
    <f7-row class="f7-row">
          <f7-col class="f7-icons" width="20"
          ><f7-link
            back
            icon-material="xmark"
            icon-f7="xmark"
            color="white"
          ></f7-link
        ></f7-col>
      <f7-col class="f7-col-title">工程基本信息</f7-col>
      <f7-col class="f7-icons" width="20">ellipsis</f7-col>
    </f7-row>
    <!-- 内容 -->
    <f7-card class="qm-card">
      <f7-list>
        <f7-list-item accordion-item title="工程信息" class="qm-list-item">
          <!-- 标题旁的标志 -->
          <div slot="media" class="list-icon"></div>
          <f7-accordion-content>
            <f7-list>
              <qm-field
                label="工程名称"
                readonly
                placeholder="请输入"
                v-model="information.name1"
              >
              </qm-field>
              <qm-field
                label="工程编码"
                readonly
                placeholder="请输入"
                v-model="information.name2"
              >
              </qm-field>
              <qm-field
                label="监督登记号"
                v-model="information.name3"
                readonly
                placeholder="请输入"
                readonlyv-model="information.name3"
              >
              </qm-field>
              <qm-field
                label="监督员"
                placeholder="请输入"
                v-model="information.name4"
                readonly
              >
              </qm-field>
              <qm-field
                label="施工许可证号"
                placeholder="请输入"
                v-model="information.name5"
                readonly
              >
              </qm-field>
              <qm-field
                label="工程状态"
                placeholder="请输入"
                v-model="information.name6"
                readonly
              >
              </qm-field>
              <qm-field
                label="工程地址"
                :is-link="true"
                v-model="information.name7"
                readonly
                placeholder="请选择登记去向时间"
              >
              </qm-field>
              <qm-field
                label="工程概括"
                autosize
                placeholder="请输入"
                v-model="information.name8"
                readonly
                type="textarea"
              >
              </qm-field>
            </f7-list>
          </f7-accordion-content>
        </f7-list-item>
      </f7-list>
    </f7-card>
    <!-- 内容二 -->
    <f7-card class="qm-card">
      <f7-list>
        <f7-list-item accordion-item title="责任主体" class="qm-list-item">
          <!-- 标题旁的标志 -->
          <div slot="media" class="list-icon"></div>
          <f7-accordion-content>
            <f7-list>
              <div class="div-radius">
              <table
                align="center"
                cellspacing="0"
                cellpadding="2"
                class="table"
                width="90%"
                v-for="(item, index) in list"
                :key="index"
              >
                <tr>
                  <td class="td-one">建设单位</td>
                  <td>
                    <f7-list>
                      <f7-list-item
                        :title="item.company"
                        link="#"
                      ></f7-list-item>
                    </f7-list>
                  </td>
                </tr>
                <tr>
                  <td class="td-one">负责的人</td>
                  <td class="td-two">{{ item.name }}</td>
                </tr>
              </table>
              </div>
            </f7-list>
          </f7-accordion-content>
        </f7-list-item>
      </f7-list>
    </f7-card>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          company: "广东珠三角城际轨道交通有限公司",
          name: "陈威",
        },
        {
          company: "广东珠三角城际轨道交通有限公司",
          name: "陈威",
        },
        {
          company: "广东珠三角城际轨道交通有限公司",
          name: "陈威",
        },
      ],
      information: {
        name1: "广州大学大学城校区绿篱建设项目",
        name2: "--",
        name3: "SZJDRF2021001",
        name4: "徐海强、何子涵、吴风云",
        name5: "无",
        name6: "在建",
        name7: "广州丶东莞",
        name8:
          "广州南站至望洪段全线共设5个新建车站，1个维修工区。佛莞城际铁路广州南至望洪段人防划分2哥护防单元，人防设防区处进行不断的",
      },
    };
  },
};
</script>
<style lang="less" scoped>
/deep/ .van-field__label {
  line-height: 36px;
  margin-right: 29px;
}
.step-body7 {
  background-color: var(--color-fill-background);

  // 表头
  .f7-row {
    background-color: var(--color-brand);
    margin: 0;
    padding: 0;
    padding-top: calc(27px * var(--ratio));
    padding-bottom: calc(20px * var(--ratio));

    .f7-col-title {
      font-size: calc(32px * var(--ratio));
      text-align: center;
      color: #ffffffe6;
      font-weight: 400;
    }

    .f7-icons {
      font-size: calc(40px * var(--ratio));
      color: var(--color-fill-grey-inverse);

      .f7-link {
        height: auto;
      }

      .f7-link::before {
        display: none;
      }
    }
  }

  // 内容
  .qm-card {
    margin: 0px;
    padding: 0px;
    padding-left: 8px;
    margin-top: calc(20px * var(--ratio));
    --f7-card-border-radius: 0px;
    --f7-list-item-title-font-size: calc(30px * var(--ratio));
    --f7-list-item-title-text-color: var(--color-text-title);
    --f7-list-item-title-font-weight: 600;
    --f7-list-item-media-margin: 0px;

    /deep/ .list .item-media {
      min-width: 10px;
    }

    .qm-list-item {
      --f7-list-item-padding-horizontal: 10px;
      .item-inner:before {
        color: #ced6e0b8;
      }

      .item-media {
        min-width: 0px;
        margin-right: 7px;
      }

      .list-icon {
        width: 4px;
        height: 13px;
        margin-bottom: 2px;
        background: var(--color-brand);
      }

      .div-radius {
        width: 100%;
        border-radius: 10px;
        overflow: hidden;

        .table {
          margin-bottom: calc(32px * var(--ratio));
          margin-top: 1px;
          border: 1px solid var(--color-divider-line);
          border-radius: 4px;
          border-collapse: collapse;
          border-style: hidden;
          box-shadow: 0 0 0 1px var(--color-divider-line);
          tr {
            height: calc(133px * var(--ratio));

            .td-one {
              text-align: center;
              width: 30%;
              color: #61677A;
              font-size: calc(30px * var(--ratio));

            }

            .td-two {
              padding-left: 16px;
            }

            td {
              border: 1px solid var(--color-divider-line);
              text-align: left;
              border-spacing: 0;
              border-radius: inherit;
              --f7-list-item-title-white-space: normal;
              --f7-list-item-title-font-weight: 0;
            }
          }
        }
      }
    }
  }
}

</style>
